<template>
  <div class="dashboard">
    <div class="welcome-section">
      <el-card>
        <div class="welcome-content">
          <h2>欢迎回来，{{ currentUser?.username }}！</h2>
          <p>您的角色：<el-tag :type="getRoleType(currentUser?.role)">{{ getRoleName(currentUser?.role) }}</el-tag></p>
        </div>
      </el-card>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-if="hasPermission('user:read')">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon user-icon">
                <el-icon size="30"><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">156</div>
                <div class="stat-label">用户总数</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6" v-if="hasPermission('role:read')">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon role-icon">
                <el-icon size="30"><UserFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">8</div>
                <div class="stat-label">角色数量</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon spider-icon">
                <el-icon size="30"><Promotion /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">23</div>
                <div class="stat-label">爬虫任务</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon data-icon">
                <el-icon size="30"><DataBoard /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">1.2K</div>
                <div class="stat-label">数据条数</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="quick-actions">
      <el-card>
        <template #header>
          <span>快速操作</span>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="6" v-if="hasPermission('user:create')">
            <div class="action-item" @click="$router.push('/dashboard/users')">
              <el-icon size="40"><Plus /></el-icon>
              <p>新建用户</p>
            </div>
          </el-col>

          <el-col :span="6" v-if="hasPermission('role:create')">
            <div class="action-item" @click="$router.push('/dashboard/roles')">
              <el-icon size="40"><Setting /></el-icon>
              <p>角色管理</p>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="action-item" @click="$router.push('/dashboard/spider/tasks')">
              <el-icon size="40"><Monitor /></el-icon>
              <p>爬虫监控</p>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="action-item" @click="$router.push('/dashboard/spider/data')">
              <el-icon size="40"><Document /></el-icon>
              <p>数据查看</p>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="recent-activity">
      <el-card>
        <template #header>
          <span>最近活动</span>
        </template>
        
        <el-timeline>
          <el-timeline-item timestamp="2024-01-15 10:30" placement="top">
            <el-card>
              <h4>用户登录</h4>
              <p>管理员 admin 登录系统</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item timestamp="2024-01-15 09:15" placement="top">
            <el-card>
              <h4>爬虫任务</h4>
              <p>新闻爬虫任务执行完成，获取数据 120 条</p>
            </el-card>
          </el-timeline-item>
          
          <el-timeline-item timestamp="2024-01-14 16:45" placement="top">
            <el-card>
              <h4>用户创建</h4>
              <p>新用户 editor2 已创建</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { 
  User, UserFilled, Promotion, DataBoard, Plus, Setting, Monitor, Document 
} from '@element-plus/icons-vue'
import { useAuth } from '@/composables/useAuth'
import PermissionGuard from '@/components/PermissionGuard.vue'

const { currentUser, hasPermission } = useAuth()

const getRoleType = (role) => {
  const types = {
    admin: 'danger',
    editor: 'warning',
    viewer: 'info'
  }
  return types[role] || 'info'
}

const getRoleName = (role) => {
  const names = {
    admin: '超级管理员',
    editor: '编辑者',
    viewer: '查看者'
  }
  return names[role] || role
}
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.welcome-section {
  margin-bottom: 20px;
}

.welcome-content {
  text-align: center;
  padding: 20px;
}

.welcome-content h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.welcome-content p {
  margin: 5px 0;
  color: #666;
}

.stats-section {
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.role-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.spider-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.data-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.quick-actions {
  margin-bottom: 20px;
}

.action-item {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.action-item:hover {
  background-color: #f5f5f5;
}

.action-item p {
  margin: 10px 0 0 0;
  font-size: 14px;
  color: #666;
}

.recent-activity {
  margin-bottom: 20px;
}
</style>
